<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="build/css/style.css">
        <script src="node_modules/vue/dist/vue.min.js"></script>
    </head>
    <body>
        <div id="app" v-cloak>
            <form>
                <div class="bar">
                    <a class="list" v-bind:class="{'active': (layout == 'list')}" v-on:click="layout = 'list'" href="javascript:;"></a>
                    <a class="grid" v-bind:class="{'active': (layout == 'grid')}" v-on:click="layout = 'grid'" href="javascript:;"></a>
                </div>
                <div class="content">
                    <ul v-if="layout == 'list'" class="listGroup">
                        <li v-for="article in articles">
                            <a class="listGroupCon" v-bind:href="article.url">
                                <div class="listGroupImgWrap">
                                    <img class="listGroupImg" v-bind:src="article.image.small" alt="图片">
                                </div>
                                <div class="listGroupText">
                                    <p v-html="article.title"></p>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <ul v-if="layout == 'grid'" class="gridGroup">
                        <li v-for='article in articles'>
                            <a class="gridGroupCon" v-bind:href="article.url">
                                <div class="gridGroupImgWrap">
                                    <img class="gridGroupImg" v-bind:src="article.image.large" alt="图片">
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <script src='src/js/main.js'></script>
    </body>
</html>